<template>
  <div class="search">
    <!-- <input type="text" class="search-input" placeholder="新人必听" @change="search(value)" /> -->
    <!-- 搜索框 -->
    <van-search
      v-model="value"
      placeholder="新人必听"
      class="search-input"
      @input="search(value)"
      @focus="onFocus"
    />
    <!-- 响应框 -->
    <div
      class="searchList"
      :style="{
        position: 'absolute',
        top: '40px',
        left: '16px',
        backgroundColor: '#fff',
        width: '320px',
        padding: '10px',
        boxShadow: '0px 0px 5px #eee',
        zIndex: '999',
      }"
      v-if="listShow == 1"
    >
      <ul>
        <h5>单曲</h5>
        <li
          v-for="(item, index) in searchSonglist"
          :key="item.id + index"
          @click="onPlay(item.id)"
        >
          {{ item.name }}-----{{ item.artists[0].name }}
        </li>
        <h5>歌手</h5>
        <li
          v-for="(item, index) in searchPeolist"
          :key="item.id + index"
          @click="onSing(item.id)"
        >
          {{ item.name }}
        </li>
        <h5>专辑</h5>
        <li
          v-for="(item, index) in searchZhuanlist"
          :key="item.id + index"
          @click="onZhuan(item.id)"
        >
          {{ item.name }}-----{{ item.artists[0].name }}
        </li>
        <h5>歌单</h5>
        <li
          v-for="(item, index) in searchListlist"
          :key="item.id + index"
          @click="ongetList(item.id)"
        >
          {{ item.name }}
        </li>
      </ul>
    </div>
    <!--热搜榜 -->
    <van-tabs v-model="active" animated @click="onShow">
      <van-tab v-for="(item, index) in list" :title="item" :key="index">
        <!-- 热搜榜 -->
        <div class="defaultList" v-if="index == active">
          <ul
            v-for="(item, index) in searchdefaultlist"
            :key="index"
            @click="onPlay(item.id)"
          >
            <li>
              <span>{{ index + 1 }}</span
              >{{ item.first }}
            </li>
          </ul>
        </div>
        <!-- 话题榜 -->
        <div class="itemList" v-if="index == active">
          <ul
            v-for="(item, index) in itemList"
            :key="index"
            @click="getTopic(item.actId)"
          >
            <li>
              <span>{{ index + 1 }}</span
              >{{ item.title }}
            </li>
          </ul>
        </div>
        <!-- 歌手榜 -->
        <div class="userList" v-if="index == active">
          <ul
            v-for="(item, index) in userList"
            :key="index"
            @click="onSing(item.id)"
          >
            <li>
              <span>{{ index + 1 }}</span
              >{{ item.name }}
            </li>
          </ul>
        </div>
        <!-- 播放 -->
        <div class="playList" v-if="index == active">
          <ul
            v-for="(item, index) in playList"
            :key="index"
            @click="onPlay(item.id)"
          >
            <li>
              <span>{{ index + 1 }}</span
              >{{ item.song.name }}-----{{ item.song.ar[0].name }}
            </li>
          </ul>
        </div>
      </van-tab>
    </van-tabs>
    <!-- 音乐专区 -->
    <h5>音乐专区</h5>
    <div class="zhuanqu" :style="{ height: heights }">
      <div><h4>歌手分类</h4></div>
      <div>
        <h4>曲风分类</h4>
        <p>查看你的专属曲风偏好</p>
      </div>
      <div>
        <h4>乐谱典藏馆</h4>
        <p>收录百万正版优质乐谱</p>
      </div>
      <div>
        <h4>影视原声专区</h4>
        <p>听歌追剧好时光</p>
      </div>
      <div>
        <h4>电音专区</h4>
        <p>全球热门电音嗨翻现场</p>
      </div>
      <div>
        <h4>Beat交易专区</h4>
        <p>海量beats为创作助力</p>
      </div>
      <div>
        <h4>爵士专区</h4>
        <p>开启爵美生活</p>
      </div>
      <div>
        <h4>中文原创专区</h4>
        <p>21省音乐电台助力系列</p>
      </div>
      <div>
        <h4>说唱专区</h4>
        <p>REAL说唱为你注入灵魂</p>
      </div>
      <div>
        <h4>摇滚专区</h4>
        <p>国摇新声势力等你来听</p>
      </div>
      <div>
        <h4>古典专区</h4>
        <p>精选典雅，优雅永不过时</p>
      </div>
      <div>
        <h4>ACG专区</h4>
        <p>在音乐中追番打游戏</p>
      </div>
      <div>
        <h4>DJ专区</h4>
        <p>潮流网络热歌一网打尽</p>
      </div>
      <div>
        <h4>亲子专区</h4>
        <p>陪伴宝贝快乐成长</p>
      </div>
      <div>
        <h4>中国特色专区</h4>
        <p>了解中国传统音乐文化</p>
      </div>
      <div>
        <h4>经典专区</h4>
        <p>历久弥新，重温旧时光</p>
      </div>
      <!-- 音乐专区底部 -->
      <div class="down" @click="zhankai">
        <van-icon name="arrow-down" />
        <p>点击展开更多</p>
      </div>
    </div>

    <!-- 推荐活动 -->
    <div class="tjActive">
      <h5>推荐活动</h5>
      <p>在云村情绪基地，收获最真实回应</p>
      <p>用户调研：用户成长等级权益由你来定</p>
      <p>火前留名：挑战你的听歌品味</p>
      <p>广播电台：一键收听音乐资讯有声书</p>
    </div>
  </div>
</template>



<script>
import {
  searchMusicAPI,
  searchZhuanAPI,
  searchPeopleAPI,
  searchListAPI,
  searchDefaultAPI,
} from "../../api/search";
import { getItemAPI, getVideoAPI, getUserAPI } from "../../api/bangdan";
import axios from "axios";
import { getToken } from "../../utils/auth";
export default {
  data() {
    return {
      listShow: 0,
      value: "",
      active: 0,
      // isShow:false,
      list: ["热搜榜", "话题榜", "歌手榜", "播放"],
      searchSonglist: [],
      searchPeolist: [],
      searchZhuanlist: [],
      searchListlist: [],
      searchdefaultlist: [],

      itemList: [],
      videoList: [],
      userList: [],
      playList: [],
      heights: "",
    };
  },
  computed: {},
  watch: {},

  methods: {
    async search(value) {
      this.listShow = 1;
      const songdata = await searchMusicAPI(value);
      const peodata = await searchPeopleAPI(value);
      const zhuandata = await searchZhuanAPI(value);
      const listdata = await searchListAPI(value);

      this.searchSonglist = songdata.result.songs;
      this.searchPeolist = peodata.result.artists;
      this.searchZhuanlist = zhuandata.result.albums;
      this.searchListlist = listdata.result.playlists;
    },
    async onFocus() {
      this.listShow = 2;
      // const defaultdata = await searchDefaultAPI();
      // this.searchdefaultlist = defaultdata.result.hots;
    },
    async onShow(uid) {
      //  console.log(this.active);
      if (this.active == 0) {
        this.itemList = this.userList = this.playList = "";
        let result = await axios.post(
          "http://192.168.1.107:3000/search/hot?timestamp=" +
            Date.now() +
            "&cookie=" +
            getToken(),
          {},
          {
            withCredentials: true,
          }
        );
        // console.log(111111,result.data.result.hots);
        this.searchdefaultlist = result.data.result.hots;
      } else if (this.active == 1) {
        this.searchdefaultlist = this.userList = this.playList = "";
        //  result = await axios.post(
        // 'http://192.168.1.107:3000/hot/topic?timestamp='+Date.now()+'&cookie='+getToken()+'&limit=10',{},
        // {
        //     withCredentials:true
        // });
        // console.log(222222,result);
        axios({
          url: `http://192.168.1.107:3000/login/cellphone?phone=15637213957&password=zm15637213957`,
          withCredentials: true, //关键
        }).then((res) => {
          // console.log(this)
          axios({
            url: `http://192.168.1.107:3000/hot/topic?cookie=${res.data.cookie}&limit=10`,
            withCredentials: true, //关键
          }).then((res) => {
            // console.log(33333,res.data)
            this.itemList = res.data.hot;
          });
        });
      } else if (this.active == 2) {
        this.itemList = this.searchdefaultlist = this.playList = "";
        axios({
          url: `http://192.168.1.107:3000/login/cellphone?phone=15637213957&password=zm15637213957`,
          withCredentials: true, //关键
        }).then((res) => {
          // console.log(this)
          axios({
            url: `http://192.168.1.107:3000/top/artists?cookie=${res.data.cookie}&limit=10`,
            withCredentials: true, //关键
          }).then((res) => {
            console.log(res.data.artists);
            this.userList = res.data.artists;
          });
        });
      } else if (this.active == 3) {
        this.itemList = this.userList = this.searchdefaultlist = "";
        // let result = await axios.post(
        // 'http://192.168.1.107:3000/toplist/artist?timestamp='+Date.now()+'&cookie='+getToken(),{},
        // {
        //     withCredentials:true
        // });
        // console.log(666666,result);
        axios({
          url: `http://192.168.1.107:3000/login/cellphone?phone=15637213957&password=zm15637213957`,
          withCredentials: true, //关键
        }).then((res) => {
          console.log(333333, res.data.account.id);
          axios({
            url: `http://192.168.1.107:3000/user/record?cookie=${res.data.cookie}&uid=${res.data.account.id}&limit=10`,
            withCredentials: true, //关键
          }).then((res) => {
            console.log(res.data.allData);
            this.playList = res.data.allData;
          });
        });
      }
    },
    async onPlay(id) {
      let result = await axios.post(
        `http://192.168.1.107:3000/song/detail?ids=${id}`,
        {
          withCredentials: true,
        }
      );
      // console.log(111111,result.data.songs[0].id);
      this.$router.push("/detail");
    },
    async onSing(id) {
      let result = await axios.post(
        `http://192.168.1.107:3000/artist/songs?id=${id}`,
        {
          withCredentials: true,
        }
      );
      localStorage.setItem(
        "str",
        JSON.stringify({
          singerId: id,
          singer: result.data.songs[0].ar[0].name,
        })
      );
      this.$router.push("/singerlist");
    },
    async onZhuan(id) {
      let result = await axios.post(
        `http://192.168.1.107:3000/album/detail?id=${id}`,
        {
          withCredentials: true,
        }
      );
      localStorage.setItem(
        "str",
        JSON.stringify({
          albumId: result.data.album.albumId,
          albumName: result.data.album.albumName,
          artistName: result.data.album.artistName,
          coverUrl: result.data.album.coverUrl,
        })
      );
      this.$router.push("/albumdetail");
    },
    async ongetList(id) {
      let result = await axios.post(
        `http://192.168.1.107:3000/playlist/track/all?id=${id}&limit=20`,
        {
          withCredentials: true,
        }
      );
      localStorage.setItem("listId", id);
      this.$router.push("/gedan");
    },
    async getTopic(id) {
      let result = await axios.post(
        `http://192.168.1.107:3000/topic/detail/event/hot?actid=${id}`,
        {
          withCredentials: true,
        }
      );
      localStorage.setItem("topicId", id);
      // console.log("name",result.data.songs[0].ar[0].name)
      // localStorage.setItem('str',JSON.stringify({'singerId':id,'singer':result.data.songs[0].ar[0].name}));
      this.$router.push("/topicdetail");
    },
    zhankai() {
      this.heights = "800px";
    },
  },
  created() {
    this.onShow();
  },
  mounted() {},
  components: {},
};
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
}
.search-input,
.van-search__content {
  width: 100%;
  height: 400px;
  border: none;
  border-bottom: 1px solid grey;
  height: 32px;
  background-color: #fff;
}
h5 {
  margin: 10px 0;
}
.searchList h5 {
  margin: 0;
  padding: 0;
}
.searchList li {
  text-indent: 20px;
  font-size: 13px;
  line-height: 18px;
}
.defaultList li {
  cursor: pointer;
  line-height: 23px;
}
.defaultList ul:nth-of-type(1),
.defaultList ul:nth-of-type(2),
.defaultList ul:nth-of-type(3) {
  font-size: 16px;
  font-weight: bold;
}
.defaultList ul span {
  text-align: center;
  display: inline-block;
  width: 40px;
}
.defaultList ul:nth-of-type(1) span,
.defaultList ul:nth-of-type(2) span,
.defaultList ul:nth-of-type(3) span {
  font-weight: normal;
  color: red;
}
.van-tabs van-tabs--line {
  height: 35%;
}
.zhuanqu {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  height: 330px;
  overflow: hidden;
  position: relative;
}
.tjActive {
  height: 20%;
  padding-left: 10px;
}
.tjActive h5 {
  margin-top: 20px;
}
.zhuanqu div {
  width: 42%;
  height: 50px;
  border-radius: 10px;
  padding: 10px 0 10px 0;
  background-color: rgb(247, 52, 52);
  color: #fff;
  margin-top: 10px;
  cursor: pointer;
  overflow: hidden;
  background-image: linear-gradient(
    to right,
    rgb(240, 34, 34),
    rgb(247, 192, 192)
  );
}
.search .zhuanqu .down {
  color: black;
  width: 100%;
  height: 30px;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.438);
  font-size: 16px;
  position: absolute;
  bottom: -2px;
  left: 0;
  background-image: linear-gradient(rgba(102, 87, 87, 0), rgb(250, 246, 246));
}
.zhuanqu p {
  font-size: 10px;
  margin-top: 15px;
  width: 100%;
  height: 25px;
  line-height: 25px;
  text-indent: 20px;
  background-color: rgba(0, 0, 0, 0.055);
}
.zhuanqu .down p {
  width: 100%;
  height: 30px;
  color: #000;
  margin: 0;
  text-indent: 0;
  line-height: 16px;
}
.zhuanqu h5 {
  margin-top: 20px;
  margin-left: 10px;
}
.zhuanqu h4 {
  font-size: 14px;
  text-indent: 20px;
  letter-spacing: 2px;
}
.tjActive {
  margin-top: 10px;
}
.tjActive p {
  line-height: 26px;
  cursor: pointer;
}
.van-tabs__content li span {
  display: inline-block;
  width: 40px;
  text-align: center;
}
.defaultList,
.itemList,
.userList,
.playList {
  line-height: 28px;
}

.zhuanqu div:nth-of-type(1) {
  background-image: linear-gradient(
    to right,
    rgb(102, 87, 87),
    rgb(218, 192, 192)
  );
}
.zhuanqu div:nth-of-type(3) {
  background-image: linear-gradient(
    to right,
    rgb(89, 104, 124),
    rgb(161, 207, 245)
  );
}
.zhuanqu div:nth-of-type(4) {
  background-image: linear-gradient(
    to right,
    rgb(128, 62, 8),
    rgb(235, 189, 151)
  );
}
.zhuanqu div:nth-of-type(5) {
  background-image: linear-gradient(
    to right,
    rgb(66, 44, 145),
    rgb(164, 209, 238)
  );
}
.zhuanqu div:nth-of-type(6) {
  background-image: linear-gradient(
    to right,
    rgb(233, 139, 31),
    rgb(247, 210, 169)
  );
}
.zhuanqu div:nth-of-type(7) {
  background-image: linear-gradient(
    to right,
    rgb(108, 8, 128),
    rgb(237, 145, 240)
  );
}
.zhuanqu div:nth-of-type(8) {
  background-image: linear-gradient(
    to right,
    rgb(18, 71, 102),
    rgb(170, 186, 230)
  );
}
.zhuanqu div:nth-of-type(9) {
  background-image: linear-gradient(
    to right,
    rgb(173, 91, 24),
    rgb(223, 185, 155)
  );
}
.zhuanqu div:nth-of-type(10) {
  background-image: linear-gradient(
    to right,
    rgb(109, 201, 47),
    rgb(191, 233, 190)
  );
}
.zhuanqu div:nth-of-type(11) {
  background-image: linear-gradient(
    to right,
    rgb(221, 202, 34),
    rgb(248, 236, 186)
  );
}
.zhuanqu div:nth-of-type(12) {
  background-image: linear-gradient(
    to right,
    rgb(202, 53, 78),
    rgb(250, 203, 215)
  );
}
.zhuanqu div:nth-of-type(13) {
  background-image: linear-gradient(
    to right,
    rgb(236, 70, 200),
    rgb(240, 200, 231)
  );
}
.zhuanqu div:nth-of-type(14) {
  background-image: linear-gradient(
    to right,
    rgb(240, 50, 139),
    rgb(248, 180, 220)
  );
}
.zhuanqu div:nth-of-type(15) {
  background-image: linear-gradient(
    to right,
    rgb(178, 230, 56),
    rgb(214, 238, 192)
  );
}
.zhuanqu div:nth-of-type(16) {
  background-image: linear-gradient(
    to right,
    rgb(15, 230, 158),
    rgb(202, 248, 226)
  );
}
</style>